@uiName:.zku-;
// 附件上传
@upload-box-size: 180px;
@upload-box-close: 24px;

@{uiName}uploader-control {
	padding-top: 10px;

	ul {
		li {
			width: @upload-box-size;
			height: @upload-box-size;
			display: inline-block;
			margin: 0 5px 5px 0;
		}
	}

	@{uiName}uploader-item,
	@{uiName}uploader {
		float: left;
		width: 100%;
		height: @upload-box-size;
		// padding: 25% 0;
		box-sizing: border-box;
	}

	@{uiName}uploader-item {
		position: relative;
		// margin: 0 6px 6px 0;
		padding: 4px;
		// background: no-repeat center center;
		// background-size: cover;
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;

		& .close {
			background: #f00;
			position: absolute;
			right: 0;
			top: 0;
			// z-index: 99;
			font-size: @upload-box-close -1;
			color: #fff;
			width: @upload-box-close;
			height: @upload-box-close;
			line-height: @upload-box-close;
			text-align: center;
		}

		img {
			max-width: 100%;
			max-height: 100%;
		}

		@{uiName}uploader-mark {
			background: rgba(0, 0, 0, 0.8);
			position: absolute;
			width: 100%;
			height: 100%;
			color: #fff;
			text-align: center;
			padding: 15% 0;
			box-sizing: border-box;

			p {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 50%;
				font-size: 18px;
			}

			.zkuasgm-icon {
				font-size: @upload-box-size / 3;
				box-sizing: border-box;
			}
		}
	}

	@{uiName}uploader {
		position: relative;
		margin-right: 6px;
		margin-bottom: 6px;
		border: 1px solid #d9d9d9;
		cursor: pointer;
	}

	@{uiName}uploader:active {
		background-color: #efefef;
	}

	@{uiName}uploader:before {
		height: 2px;
		width: 40px;
	}

	@{uiName}uploader:after {
		width: 2px;
		height: 40px;
	}

	@{uiName}uploader:before,
	@{uiName}uploader:after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}
}